
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="xms">
    <meta name="author" content="xms">
    <link rel="icon" href="/content/favicon.ico">

    <title>自定义 - 选项集 - 选项集编辑</title>

    <!-- Bootstrap core CSS -->
    <link href="/content/css/bootstrap3.3.5/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="/content/css/dashboard.css" rel="stylesheet">
    <link href="/content/css/font-awesome.min.css" rel="stylesheet">
    <link href="/content/customize/css/common.css" rel="stylesheet">
    <link href="/content/js/jquery-toast/jquery.toast.min.css" rel="stylesheet">
    <link id="themeLink" href="/content/css/theme/default.css" rel="stylesheet" />
    <!-- Bootstrap core JavaScript ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="/content/js/jquery.min.js"></script>
    <script src="/content/js/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="/content/js/ie10-viewport-bug-workaround.js"></script>
    <script src="/content/js/jquery.bootstrap.min.js"></script>
    <script src="/content/js/json2.js"></script>
    <script src="/content/js/xms.utility.js"></script>
    <script src="/content/js/jquery-ui-1.10.3/ui/jquery.ui.core.js"></script>
    <script src="/content/js/jquery-ui-1.10.3/ui/jquery.ui.widget.js"></script>
    <script src="/content/js/jquery-ui-1.10.3/ui/jquery.ui.mouse.js"></script>
    <script src="/content/js/jquery-ui-1.10.3/ui/jquery.ui.draggable.js"></script>
    <script src="/content/js/jquery-toast/jquery.toast.min.js"></script>
    <script src="/content/js/xms.jquery.js"></script>
    <script src="/content/js/xms.web.js"></script>
    <script src="/content/js/xms.metadata.js"></script>
    <script src="/content/js/md5.js" type="text/javascript"></script>
    <script src="/content/js/commonlabels.js"></script>
    <script src="/content/js/common/pagecontext.js"></script>
    <script src="/api/user/usercontext"></script>
    <script>
        jQuery(function () {
            Xms.Web.Loading();
            function aLinkClick(e) {

                if (currentKeycode != 17 && window.parent && window.parent.addToTab) {
                    e.preventDefault();
                    var tabNav = $('#customTabNav', parent.document).children('.iframe-link-linkitem.active');
                    var textEl = tabNav.clone();
                    $(".glyphicon-remove", textEl).remove();
                    var label = textEl.text();
                    textEl = $(this).clone();
                    $("span", textEl).remove();
                    label = label + '-' + textEl.text();
                    var link = $(this).attr("href");
                    var id = $.md5(link);
                    Xms.Web.callParentMethod('addToTab', { id: id, label: label, link: link });
                    return false;
                } else {
                    //  currentKeycode = -99999;
                    //  var link = $(this).attr("href");
                    //  Xms.Web.OpenWindow(link);
                }

            }
            var currentKeycode = -99999;
            $("body").on("click.customizeLinkclick", 'a[href]a:not([href^="javascript:"])a:not([href^="#"])', function (e) {
                aLinkClick.call(this, e);
            });
        });
    </script>
    <style>
    body {
        padding: 0;
        margin: 0;
    }

    .table-responsive {
        max-height: 400px;
        overflow-y: auto;
    }

    .panel-default .panel-heading {
        background-color: white;
    }
</style>
</head>
<body>
<div class="" id="body">
    <div class="clearfix">
        <div class="col-md-12" id="main">
            <div class="" style="padding:5px;" id="renderBody">
                <!--main-->

                <div class="panel  panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">
                            <a data-toggle="collapse"
                               href="#collapseTwo">
                                <strong>选项集编辑</strong>
                            </a>
                        </h3>
                    </div>
                    <div id="collapseTwo" class="panel-collapse collapse in">
                        <div class="panel-body">
                            <form action="/xms/api/schema/optionset/update" data-jsonajax="true" data-formdata="false" method="post" id="editform" class="form-horizontal" role="form">
                                <input data-val="true" id="OptionSetId" name="optionsetid" data-name="optionsetid" type="hidden" />
                                <div class="form-group col-sm-12">
                                    <label class="col-sm-2 control-label" for="Name">名称</label>
                                    <div class="col-sm-10">
                                        <input class="form-control required" id="Name" name="name" data-name="name" type="text" />
                                    </div>
                                </div>
                                <div class="form-group col-sm-12">
                                    <label class="col-sm-2 control-label" for="optionset-picklist">选项</label>
                                    <div class="col-sm-10">
                                        <div class="btn-group  btn-group-xs">
                                            <button type="button" class="btn btn-primary" onclick="addOption('optionset-picklist')">
                                                <span class="glyphicon glyphicon-plus-sign"></span> 新增
                                            </button>
                                            <button type="button" class="btn btn-warning" onclick="clearOption('optionset-picklist')">
                                                <span class="glyphicon glyphicon-trash"></span> 清空
                                            </button>
                                        </div>
                                        <div id="optionset-area">

                                            <table id="optionset-picklist" class="table">
                                                <thead>
                                                <tr>
                                                    <th width="20"></th>
                                                    <th>显示名称</th>
                                                    <th>值</th>
                                                    <th>默认选中</th>
                                                    <th>操作</th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                <tr class="draggable-ui optionsetItems">
                                                    <td valign="middle"><span class="glyphicon glyphicon-hand-up draggable-icon" title="可拖动排序"></span></td>
                                                    <td>
                                                        <input onblur="CheckRepeat('optionsetname')" type="text" class="form-control input-sm required optionsetname" name="optionsetname" maxlength="50" />
                                                        <input type="hidden" name="detailid" data-type="guid" />
                                                    </td>
                                                    <td><input onblur="CheckRepeat('optionsetvalue')" type="text" class="form-control input-sm required optionsetvalue" name="optionsetvalue" data-type="int" /></td>
                                                    <td>
                                                        <input type="checkbox" onclick="$(this).next().val($(this).prop('checked'))"  />
                                                        <input name="isselectedoption" type="hidden" />
                                                    </td>
                                                    <td>
                                                        <button type="button" class="btn btn-warning btn-xs" onclick="removeOption('optionset-picklist', this)">
                                                            <span class="glyphicon glyphicon-trash"></span>
                                                        </button>
                                                        <button type="button" class="btn btn-info btn-xs" onclick="moveOption('optionset-picklist', this, true)">
                                                            <span class="glyphicon glyphicon-arrow-up"></span>
                                                        </button>
                                                        <button type="button" class="btn btn-info btn-xs" onclick="moveOption('optionset-picklist', this, false)">
                                                            <span class="glyphicon glyphicon-arrow-down"></span>
                                                        </button>
                                                    </td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group col-sm-12 text-center" id="form-buttons">
                                    <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-saved"></span> 保存</button>
                                    <button type="reset" class="btn btn-default"><span class="glyphicon glyphicon-refresh"></span> 重置</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

            </div>
            <nav class="navbar navbar-default navbar-fixed-bottom hide" role="navigation" id="body-footer">
                <div class="container">
                    <div class="navbar-form navbar-right" id="body-footer-content">
                    </div>
                </div>
            </nav>
        </div>
    </div>
</div>

<script src="/content/js/jquery-ui-1.10.3/ui/jquery.ui.core.js"></script>
<script src="/content/js/jquery-ui-1.10.3/ui/jquery.ui.widget.js"></script>
<script src="/content/js/jquery-ui-1.10.3/ui/jquery.ui.mouse.js"></script>
<script src="/content/js/jquery-ui-1.10.3/ui/jquery.ui.sortable.js"></script>
<script src="/content/js/jquery.form.js"></script>
<script src="/content/js/jquery-validate/jquery.validate.min.js"></script>
<script src="/content/js/jquery-validate/localization/messages_zh.min.js"></script>
<script src="/content/js/xms.fillform.js"></script>
<script>
    var model = $.urlParamObj(location.href);
    $('#optionsetid').val(model.id);
    function loadData() {
        Xms.Web.GetJson('/api/schema/optionset/getbyid/' + model.id, null, function (res) {
            var data = res.Content;
            if(!data) return;
            $('#editform').fillForm(data);
            if(!data.items) return;
            $(data.items).each(function(i, item) {
                var row = addOption('optionset-picklist');
                row.find('[name=optionsetname]').val(item.name);
                row.find('[name=optionsetvalue]').val(item.value);
                if(item.isselected) {
                    row.find('input[type=checkbox]').prop('checked', true);
                }
                row.find('[name=isselectedoption]').val(item.isselected ? 'true' : 'false');
            });
            $('#optionset-picklist').find('tbody>tr:first').remove();
        }, null, false, 'GET', true);
    }
    $(function () {
        loadData();
        Xms.Web.fullByContext($(window), $('#renderBody'), -80)
        Xms.Web.fullByContext($(window),$('#optionset-area'),-270,0,'max-height')
        //表单验证
        Xms.Web.Form($("#editform"), null, null, function () {
            var nameCheck = CheckRepeat('optionsetname');
            var valueCheck = CheckRepeat('optionsetvalue');
            if (!nameCheck || !valueCheck) {
                return false;
            }
        });
        //选项集
        Xms.Web.SingleCheckbox('#optionset-picklist', 'input[type=checkbox]', 'single', function (context) {
            console.log($(this))
            var hideIn = $(this).siblings("input[name='isselectedoption']");
            $("input[name='isselectedoption']").val('false');
            hideIn.val(true);
        }, true);

        $('#optionset-picklist').sortable({
            cancel: 'input',
            items: ".draggable-ui",
            //placeholder: "drag-placeholder",
            over: function (event, ui) {
                // if (!ui.item.is('.cell')) return;
                var parent = $(event.target);
            },
            out: function (event, ui) {
                //  if (!ui.item.is('.cell')) return;
                var parent = $(event.target);
            },
            start: function (event, ui) {
                console.log(event);
                if (event.target && event.target.nodeType && event.target.nodeType == 'Tr') {

                }
            },
            update: function (event, ui) {

            },
            stop: function (event, ui) {

                //return false;
            }
        }).disableSelection();
        $('#renderBody').css({ 'margin-bottom': 40 });
    });
    //选项集-增加选项
    function addOption(id, row) {
        var $target = $("#" + id);
        var newRow = row ? row.clone() : $target.find('tr:last').clone();
        newRow.find('input[type=text]').val('');
        newRow.find('input[type=hidden]').val(false);
        newRow.find('input[name=detailid]').val(Xms.Utility.Guid.EmptyGuid.ToString());
        newRow.find('input[type=checkbox]').prop('checked', false);
        $target.append(newRow);
        return newRow;
    }
    //选项集-删除选项
    function removeOption(id, row) {
        var $target = $("#" + id);
        if ($(row).parents('tr').siblings().length > 0) {
            $(row).parents('tr').remove();
        }
        else {
            var newRow = $(row).parents('tr');
            $target.find('tbody').empty();
            addOption(id, newRow);
        }
    }
    //选项集-清空选项
    function clearOption(id) {
        var $target = $("#" + id);
        $target.find('tbody').find('tr:gt(0)').remove();
        var newRow = $target.find('tbody').find('tr:last');
        $target.find('tbody').empty();
        addOption(id, newRow);
    }
    //选项集-排序选项
    function moveOption(id, row, isup) {
        var $target = $("#" + id);
        var $this = $(row).parents('tr');
        if (isup == true && $this.prev().length > 0) {
            $this.insertBefore($this.prev());
        }
        else if (isup == false && $this.next().length > 0) {
            $this.insertAfter($this.next());
        }
    }

    //检查是否有重复的值
    function CheckRepeat(classname) {
        var check = true;
        $('.' + classname).each(function (i, n) {
            var nVal = $(n).val();
            var ncheck = true;
            if (nVal == '') {
                return true;
            }
            $('.' + classname).each(function (ii, nn) {
                var nnVal = $(nn).val();
                if (nnVal == '') {
                    return true;
                }
                if (nVal == nnVal && i != ii) {
                    if ($(n).next('label[name="repeatTip"]').length == 0) {
                        $('<label name="repeatTip">不能输入重复的值</label>').insertAfter($(n));
                    }
                    ncheck = false;
                    check = false;
                    return false;
                }
            });
            if (ncheck == true) {
                $(n).next('label[name="repeatTip"]').remove();
            }
        });
        return check;
    }
</script>

</body>
</html>